class DraggableComponent extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });

        const template = `
                <div id="container">
                    <slot></slot>
                    <div class="resizer"></div>
                </div>
                <style>
                    #container {
                        position: relative;
                        width: 100%;
                        height: 100%;
                        cursor: grab;
                    }
                    .resizer {
                        width: 10px;
                        height: 10px;
                        background-color: red;
                        position: absolute;
                        bottom: 0;
                        right: 0;
                        cursor: se-resize; /* 设置光标形状 */
                    }
                </style>
            `;

        this.shadowRoot.innerHTML = template;

        this.container = this.shadowRoot.getElementById('container');
        this.resizer = this.container.querySelector('.resizer');

        this.isDragging = false;
        this.isResizing = false;

        this.addEventListeners();
    }

    addEventListeners() {
        // 拖拽事件监听器
        this.container.addEventListener('mousedown', (e) => {
            if (!this.resizer.contains(e.target)) {
                this.startDrag(e);
            }
        });
        window.addEventListener('mousemove', this.drag.bind(this));
        window.addEventListener('mouseup', this.stopDrag.bind(this));

        // 调整大小事件监听器
        this.resizer.addEventListener('mousedown', (e) => {
            e.stopPropagation(); // 阻止冒泡到容器的 mousedown 事件
            this.startResize(e);
        });
        window.addEventListener('mousemove', this.resize.bind(this));
        window.addEventListener('mouseup', this.stopResize.bind(this));
    }

    startDrag(e) {
        this.offsetX = e.clientX - this.offsetLeft;
        this.offsetY = e.clientY - this.offsetTop;
        this.isDragging = true;
    }

    drag(e) {
        if (!this.isDragging) return;

        this.style.left = `${e.clientX - this.offsetX}px`;
        this.style.top = `${e.clientY - this.offsetY}px`;
    }

    stopDrag() {
        this.isDragging = false;
    }

    startResize(e) {
        this.startWidth = parseInt(window.getComputedStyle(this.container).width, 10);
        this.startHeight = parseInt(window.getComputedStyle(this.container).height, 10);
        this.startX = e.clientX;
        this.startY = e.clientY;
        this.isResizing = true;
    }

    resize(e) {
        if (!this.isResizing) return;

        const dx = e.clientX - this.startX;
        const dy = e.clientY - this.startY;

        this.container.style.width = `${this.startWidth + dx}px`;
        this.container.style.height = `${this.startHeight + dy}px`;
    }

    stopResize() {
        this.isResizing = false;
    }
}

customElements.define('draggable-component', DraggableComponent);